<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>表单元素</title>
  <style>
  fieldset {
    border-bottom: none;
    border-left: none;
    border-right: none;
  }
  </style>
</head>
<body>
  <div>
    <h2>datalist示例:</h2>
    <label>
      请输入你常用的浏览器:
      <input list="userAgent" type="text">
    </label>
    <datalist id="userAgent">
      <option value="chrome">谷歌浏览器</option>
      <option value="ie">IE浏览器</option>
      <option value="opera">Opera浏览器</option>
      <option value="firefox">Firefox浏览器</option>
      <option value="safari">Safari浏览器</option>
    </datalist>
  </div>
  <div style="border: 1px solid; margin-top: 10px;"></div>
  <div>
    <h2>fieldset示例: </h2>
    <form>
      <h2>修改用户信息</h2>
      <fieldset>
        <legend>账号信息</legend>
        <p>
          <label>
            用户账号:
            <input type="text">
          </label>
        </p>
        <p>
          <label>
            用户密码:
            <input type="password">
          </label>
        </p>
      </fieldset>
      <fieldset>
        <legend>用户基本信息</legend>
        <p>
          <label>
            用户姓名:
            <input type="text">
          </label>
        </p>
        <p>
          <label>用户性别:</label>
          <label>
            <input name="gender" type="radio" checked>男
          </label>
          <label>
            <input name="gender" type="radio">女
          </label>
        </p>
        <p>
          <label>城市:</label>
          <select name="city">
            <option value="">Lorem.</option>
            <option value="">Nostrum?</option>
            <option value="">Provident!</option>
            <option value="">Placeat!</option>
            <option value="">Mollitia.</option>
            <option value="">Culpa.</option>
            <option value="">Consectetur?</option>
            <option value="">Eum!</option>
            <option value="">Nisi.</option>
            <option value="">Ad.</option>
          </select>
        </p>
      </fieldset>
      <button>提交</button>
    </form>
  </div>
</body>
</html>